<style>
    .jstree-default .jstree-disabled {
        color: #BBBBBB;
    }
    .label-grey {
        background-color: #BBBBBB;
    }
    #columnbar .panel-heading {
        height: 55px;
        line-height: 25px;
        font-size: 14px;
    }
</style>

<div class="row row-eq-height">
    <div class="col-md-3 pr-0" id="columnbar">
        <div class="panel panel-default panel-intro" style="height: 100%;">
            <div class="panel-heading">
                <div class="panel-lead">
                    <div class="pull-left">
                        <em>{:__('Column list')}</em>
                    </div>
                    <div class="pull-right">
                        <a href="javascript:;" class="btn btn-link btn-xs btn-column hidden-xs hidden-sm"><i class="fa fa-bars"></i></a>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <span class="text-muted"><input type="checkbox" id="checkall" /> <label for="checkall"><small>{:__('Check all')}</small></label></span>
                <span class="text-muted"><input type="checkbox" id="expandall" checked="" /> <label for="expandall"><small>{:__('Expand all')}</small></label></span>
                <div id="columntree"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        if (window.innerWidth < 768) {
            document.getElementById('columnbar').className = document.getElementById('columnbar').className.replace("pr-0", "hidden");
        }
    </script>

    <div class="col-xs-12 col-md-9" id="archivespanel">
        <div class="panel panel-default panel-intro">
            <div class="panel-heading">
                <div class="panel-lead"><em>内容管理（Content Management）</em>用于管理产品中心、解决方案、资料下载、新闻中心栏目数据，启用英文后切换English管理英文数据</div>
                {if $switch_lang == '1'}
                <ul class="nav nav-tabs" data-field="lang">
                    {foreach name="langList" item="vo" key="key"}
                    <li class="{:($Think.get.lang ?? '1') == (string)$key ? 'active' : ''}">
                        <a href="#t-{$key}" data-value="{$key}" data-toggle="tab" onclick="updateBoxStyle('{$key}')">{$vo}</a>
                    </li>
                    {/foreach}
                </ul>
                {/if}
            </div>
            <div {if $switch_lang == '1'}class="box" id="SwitchColors"{/if}>
            <div id="myTabContent" class="tab-content" style="padding:15px;">
                <div class="tab-pane fade active in" id="one">
                    <div class="widget-body no-padding">
                        <div id="toolbar" class="toolbar">
                            <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                            <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('wwh/archives/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
                            <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('wwh/archives/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                            <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('wwh/archives/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                            <a href="javascript:;" class="btn btn-info btn-audit btn-disabled disabled {:$auth->check('wwh/archives/audit')?'':'hide'}" title="{:__('批量审核')}" ><i class="fa fa-check"></i> {:__('批量审核')}</a>
                        </div>
                        <form class="commonsearch-table" style="display:none">
                            <input type="hidden" name="column_id" value="">
                        </form>
                        <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                               data-operate-edit="{:$auth->check('wwh/archives/edit')}"
                               data-operate-del="{:$auth->check('wwh/archives/del')}"
                               data-operate-faudit="{:$auth->check('wwh/archives/faudit')}"
                               width="100%">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // 直接定义全局函数
       function updateBoxStyle(langId) {
    // 样式映射
       const styleMap = {
    '1': 'box-success',
    '2': 'box-warning'
    };

    // 清除旧样式
       document.getElementById('SwitchColors').classList.remove('box-success', 'box-warning');

    // 添加新样式
       document.getElementById('SwitchColors').classList.add(styleMap[langId] || 'box-success');

    console.log('当前语言:', langId, '应用样式:', styleMap[langId]);
    }

    // 初始化执行
       document.addEventListener('DOMContentLoaded', function() {
    // 获取当前激活的Tab
    const activeTab = document.querySelector('#lang-tabs li.active a');
    if (activeTab) {
    updateBoxStyle(activeTab.dataset.lang);
    }
    });
</script>
